import React, { Suspense } from 'react'
import { createHashRouter, Navigate } from "react-router-dom";
import { Spin } from 'antd'
import Layout from "@/layout/index.tsx";

function lazyLoad(Comp): React.ReactNode {
  return (
    <Suspense
      fallback={
        <Spin
          size='large'
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        />
      }
    >
      <Comp></Comp>
    </Suspense>
  )
}



// TODO: 缺少路由权限  以及 页面级别的按钮权限
const routes = [
  {
    path: "",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Navigate to="/home" />
      },
      {
        path: "home",
        name: "Home",
        element: lazyLoad(React.lazy(() => import("@/views/Home"))),
        meta: {
          auth: true,
          roles: ["admin"]
        },
      },
      {
        path: "system",
        name: "System",
        element: lazyLoad(React.lazy(() => import("@/views/System"))),
        meta: {
          auth: true,
          roles: ["user"]
        },
      },
    ]
  },

];


export function getMenusData() {
  function routesToMenus(routes) {
    return routes.filter(item => item.path).map(item => {
      return {
        key: item.path,
        label:item.name,
        children: item.children && routesToMenus(item.children)
      }
    })
  }
  return routesToMenus(routes[0].children);
}


export default createHashRouter(routes);